<?php
use yii\helpers\Html;
use yii\helpers\Url;
use app\lib\WeixinUtils;

/* @var $this yii\web\View */
/* @var $content string 字符串 */


$web = Url::to("@web");

?>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>产品搜索</title>
    <link rel="stylesheet" href="<?=$web?>/css/bag/goods_query.css" />
    <link type="text/css" href="<?= $web ?>/css/bag/goods-list.css" rel="stylesheet"/>
    <link type="text/css" href="<?=$web?>/css/bag/global.css" rel="stylesheet"/>
    <style type="text/css">
        .top_input_left{
            background-image:url(<?=$web?>/img/bag/goods_query_image/input_bg.png);
        }
        .top_input_left_left{
            background-image:url(<?=$web?>/img/bag/goods_query_image/input_left.png);
        }
        .top_input_left_right{
            background-image:url(<?=$web?>/img/bag/goods_query_image/input_delete.png);
        }
        .top_input_right{
            background-image:url(<?=$web?>/img/bag/goods_query_image/input_query.png);
        }
        .result_text_hr{
            background-image:url(<?=$web?>/img/bag/goods_query_image/hr.png);
        }
    </style>
    <script type="text/javascript" src="<?=$web?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?= $web ?>/js/tools.js"></script>
    <script type="text/javascript">
        $(function() {
            // 任何需要执行的js特效
            var w = $(document).width();
            if (w > 640) {
                w = 640;
            }
            $("body").css("font-size", w * 20 / 320);
        });


        $(window).scroll(function () {

            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            if (scrollTop + windowHeight == scrollHeight) {
                isScroll=true;
                loadGoodsList(false);
//                alert(1);
            }
        });


        var start = 0;
        var pagesize = 8;
        var good_tpl="";
        var list_isClear=false;
        var isScroll=false; //while scroll, the wait text disply in bottom, else in top
        $(function ($) {
            good_tpl = returnstring("<?=$web?>/js/bag/query_good.tpl");
            if('<?=$category?>'!='0'){
                loadGoodsList(true);
            }

        });
        function href_goods_detail(goods_code){
            goods_code = encodeURI(goods_code);
            window.location.href = "<?=Url::to(["wx-bag/goods-detail"]);?>?goods_code=" + goods_code;
        }
        var isloading=false;
        function loadGoodsList(isClear) {
            if(isloading){
                return;
            }
            if(isScroll)
            {
                $(".wait-bottom").show();
            }
            else
            {
                $(".wait-top").show();
            }

            list_isClear=isClear;
            var data = {};
            data.start = start;
            data.pagesize = pagesize;
            data.category = '<?=$category?>';
            data.order = order;
            var f=$('.top_input_left_center_input').val()._trim();
            if(f==''){
                data.filter = 0;
            }else {
                data.filter = f;
            }
            isloading=true;
            var re = returnjson("<?=Url::to(['wx-bag/get-goods-list-handle'])?>", data,true,loadGoodsSuccess);


        }

        function loadGoodsSuccess(re)
        {
            $(".wait-top").hide();
            $(".wait-bottom").hide();
            if (re.flag == 0) {
                alert(re.msg);
                return;
            } else {
                var target = $(".list-frame");
                if (list_isClear) {
                    target.empty();
                    start = 0;
                }
                $.each(re.goodsList, function (i, item) {
                    var dom = document.createElement("DIV");
                    dom.innerHTML = good_tpl._format({
                        name: item.GOODS_NAME,
                        pic: item.GOODS_IMG_URL || '<?=$web?>/logo.jpg',
                        price: item.PRICE,
                        code:item.GOODS_CODE,
                        web: '<?=$web?>'
                    });
                    target.get(0).appendChild(dom);
                });
                start = start + re.goodsList.length;
                isloading=false;
            }

        }

        function btnSearchClick()
        {
             isScroll=false;
            loadGoodsList(true);
        }

        function clearSearchText()
        {
            $(".top_input_left_center_input").val("");
        }
        var order = 0;
    </script>
</head>

<body>

<div class="main">
    <div class="top">
        <div class="top_input">
            <div class="top_input_left">
                <div class="top_input_left_left"></div>
                <div class="top_input_left_center">
                    <input class="top_input_left_center_input" type="text" placeholder="<?=$category=='0'?'商品名':$category?>"/>
                </div>
                <div class="top_input_left_right" onclick="clearSearchText()" ></div>
            </div>
            <div class="top_input_right" onclick="btnSearchClick();"></div>
        </div>
    </div>
    <div class="wait-top">
       <div class="wait-text">正在加载...</div>
    </div>
    <div id="list_frame" style="overflow: auto;">
        <ul class="list-frame">
            <!--            <li>-->
            <!--                <div class="item-frame">-->
            <!--                    <img class="goods-img" src="-->
            <? //= $web ?><!--/img/bag/goods-list/icon-shopping-cart.png">-->
            <!--                    <div class="goods-name"><label>雅图银兴梦银兴梦空间国际影院电影票雅图银兴梦银兴梦空间国际影院电影票</label></div>-->
            <!--                    <div class="goods-price"><label class="price-symbol">¥</label><label class="price">199</label></div>-->
            <!--                    <img class="btn-add-shopping-cart" src="-->
            <? //= $web ?><!--/img/bag/goods-list/btn-add-shopping-cart.png">-->
            <!--                </div>-->
            <!--            </li>-->
        </ul>
<!--        <div class="load-more"><label>正在加载....</label></div>-->
    </div>
<!--    <div class="mains">-->
<!--        <!--<div class="list">-->
<!--            <div class="image">-->
<!--                <img class="im" src="--><?///*=$web*/?><!--/img/bag/goods_query_image/image.png" width="100" />-->
<!--            </div>-->
<!--            <div class="price">-->
<!--                <div class="price_text">¥1145</div>-->
<!--            </div>-->
<!--            <div class="text">-->
<!--                <div class="text_text">魔戒II代智能穿戴戒指-黑色L号智能戒指</div>-->
<!--            </div>-->
<!--        </div>-->
<!---->
<!--    </div>-->
<!--    <div class="wait-bottom">-->
<!--        <div class="wait-text">正在加载...</div>-->
<!---->
<!--    </div>-->

</div>

</body>
</html>

